<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>忘记密码</title>
    <meta name="keywords" th:content="${SITE_CONFIG.SITE_KWD}">
    <meta name="description" th:content="${SITE_CONFIG.SITE_DESC}">

    <link rel="stylesheet" th:href="@{/libs/font-icon/icon.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
</head>
<body>
<div class="login-main">
    <div class="login-main-sub">
        <div class="login-logo">
            <div>
                <img th:src="@{/cweb/img/login-logo.png}">
            </div>
            <div>
                忘记密码
            </div>
        </div>
        <div class="login-center">
            <div class="form-group form-inline">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入账号" onkeypress="return forget_hcsj(event);">
            </div>
            <div class="form-group form-inline">
                <input type="text" class="form-control" id="verification-font" name="verification" placeholder="请输入验证码" onkeypress="return forget_hcsj(event);"
                       style="width: 68%">
                <img class="pointer vcode-img" style="width: 30%; height: 44px; display: inline">
            </div>

            <div class="form-group form-inline">
                <input type="text" class="form-control" id="phonecode" name="phonecode" style="width: 68%"
                       placeholder="输入短信验证码">
                <button type="button" id="code_button" class="btn btn-primary" style="height: 44px; width: 30%">获取验证码</button>
            </div>
            <div class="form-group form-inline">
                <input type="password" class="form-control" id="password" name="password" onkeypress="return forget_hcsj(event);"
                       placeholder="输入密码">
            </div>
            <div class="form-group form-inline">
                <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" onkeypress="return forget_hcsj(event);"
                       placeholder="再次输入密码">
            </div>

            <div class="login-forget">
                <span onclick="userLogin();">登录</span>
            </div>
            <button type="button" id="forgetConfirm" class="btn btn-primary l-bth">确认</button>
        </div>
        <hr/>
        <div class="login-footer">
            <div class="no-text">没有帐号？</div>
            <button type="button" id="login_regist" class="btn btn-primary">注册</button>
        </div>
    </div>

</div>
<script>
    $(function () {

        $('#login_regist').click(function () {
            userRegist();
        });

        $('#forgetConfirm').click(function () {
            forgetConfirm();
        });

        $('#code_button').click(function () {
            let username = $('#username').val();
            if (!username) {
                layer.msg("请输入手机号！")
                return;
            }
            if (!checkPhone(username)) {
                layer.msg("请输入正确的手机号！")
                return;
            }

            let verification_font = $('#verification-font').val();
            if (!verification_font) {
                layer.msg("请输入验证码！")
                return;
            }

            //发送验证码
            sendCode(username, $(this));
        });

        $(".vcode-img").on('click', function () {
//            var url = '/Creditgt.jpg?d='+Math.random();
//            $(this).attr('src',url);
            $(".vcode-img").attr('src', (ctx + '/verificationCode?').replace('//', '/') + Math.floor(Math.random() * 100));
        });

        $(".vcode-img").click();
    });

    function sendCode(phone, obj) {

        let verification_font = $('#verification-font').val();


        //弹框
        Core.postAjax("/blog/api/forgetsendcode", {
            phone: phone,
            code: verification_font
        }, function (data) {
            layer.msg(data.msg, {
                offset: '30%',
                time: 800
            }, function () {
                if (data.status == 200) {
                    console.info(data);
                    obj.attr('disabled', 'disabled');
                    let i = 60;
                    let codeButtonInterval = setInterval(function () {
                        obj.text(i-- + "s");
                        if (i == 0) {
                            obj.text("重新获取");
                            obj.attr('disabled', false);
                            clearInterval(codeButtonInterval);
                        }
                    }, 1000);
                } else if (data.status == 500) {

                }
                $(".vcode-img").click();
            });
        })
    }

    function forgetConfirm() {

        let username = $('#username').val();
        if (!username) {
            layer.msg("请输入手机号！")
            return;
        }

        if (!checkPhone(username)) {
            layer.msg("请输入正确的手机号！")
            return;
        }

        let phonecode = $('#phonecode').val();

        if (!phonecode) {
            layer.msg("请输入验证码！")
            return;
        }

        let password = $('#password').val();
        let confirmpassword = $('#confirmpassword').val();

        if (!password) {
            layer.msg("请输入密码！")
            return;
        }

        if (password !== confirmpassword) {
            layer.msg("两次输入密码不一致！")
            return;
        }


        //修改密码
        Core.postAjax("/blog/api/changepassword/input", {
            username: username,
            phonecode: phonecode,
            password: password
        }, function (data) {
            layer.msg(data.msg, {
                offset: '30%',
                time: 800
            }, function () {
                if (data.status == 200) {
                    userLogin();
                }
            });
        });
    }

    function checkPhone(phone) {
        if (!(/^1[34578]\d{9}$/.test(phone))) {
            return false;
        }
        return true;
    }

    //回车
    function forget_hcsj(e) {
        let keyCode = null;

        if (e.which) {
            keyCode = e.which;
        } else if (e.keyCode) {
            keyCode = e.keyCode;
        }

        if (keyCode == 13) {
            forgetConfirm();
            return false;
        }

        return true;
    }

</script>
</body>
</html>